<template>
  <div class="risk">
    <div class="col_text_center">
      {{ form.OperationName }}
    </div>
    <eagle-collapse v-model="activeNames">
      <eagle-collapse-item name="1">
        <div slot="title" class="titleStyle">
          一、适用范围
          <img
            v-if="showIcon"
            src="@/assets/Images/AppIcon/icon_info.png"
            alt=""
          />
        </div>
        <eagle-row>
          <eagle-input
            name="scope"
            :value="form.vScope"
            v-model="form.Scope"
            @input="ChangeVal1(form.Scope)"
            rows="3"
            autosize
            type="textarea"
            isInputText
          ></eagle-input>
        </eagle-row>
      </eagle-collapse-item>
    </eagle-collapse>
    <eagle-collapse v-model="activeNames">
      <eagle-collapse-item title="二、个体防护要求" name="2">
        <eagle-row :gutter="20" type="flex">
          <eagle-col span="22"></eagle-col>
          <eagle-col span="2">
            <div @click="addMark()" class="ml-5">
              <img
                class="operation-imgs"
                src="@/assets/Images/AppIcon/icon_table_add.png"
              />
            </div>
          </eagle-col>
          <eagle-col
            span="8"
            v-for="(item, index3) in form.Details2"
            :key="index3"
          >
            <eagle-col span="24" class="colstyle">
              <eagle-row>
                <div class="btm_item" @click="del(index3)">
                  <img
                    class="operation-imgs"
                    src="@/assets/Images/AppIcon/icon_delete.png"
                  />
                </div>
                <eagle-input :value="item.Attachs" readonly>
                  <template #input>
                    <eagle-image-preview
                      :images="item.Attachs"
                    ></eagle-image-preview>
                  </template>
                </eagle-input>
              </eagle-row>
              <div>
                <eagle-input
                  name="name"
                  v-model="item.Name"
                  isInputText
                ></eagle-input>
                <eagle-input
                  name="remarks"
                  v-model="item.Remarks"
                  isInputText
                ></eagle-input>
              </div>
            </eagle-col>
          </eagle-col>
        </eagle-row>
      </eagle-collapse-item>
      <eagle-collapse-item title="三、安全作业规程" name="3">
        <eagle-row class="rowBack">
          <eagle-row>
            <div
              span="10"
              class="col_text_left"
              v-for="(item, index) in form.Details5"
              :key="index"
            >
              <span class="spanTitle1"> 【{{ item.Activity }}】</span>
              <eagle-col
                span="24"
                v-for="(item2, index2) in form.Details3"
                v-if="item2.Activity == item.Activity"
                :key="index"
              >
                <eagle-input
                  label="操作要点："
                  name="operatePoint"
                  type="textarea"
                  required
                  v-model="item2.OperatePoint"
                  isInputText
                ></eagle-input>
                <eagle-input
                  label="危险源："
                  name="operatePoint"
                  v-model="item2.DangerousSource"
                  isInputText
                ></eagle-input>
                <eagle-input
                  label="潜在后果："
                  name="operatePoint"
                  v-model="item2.LatentConsequencesName"
                  isInputText
                ></eagle-input>
                <eagle-input
                  label="图示："
                  name="uploader"
                  v-model="item2.Attachs"
                >
                  <template #input>
                    <eagle-image-uploader
                      :images.sync="item2.Attachs"
                    ></eagle-image-uploader>
                  </template>
                </eagle-input>
                <eagle-cell>
                  <eagle-col span="18"></eagle-col>
                  <eagle-col span="2">
                    <div @click="up(index2)">
                      <img
                        class="operation-imgs"
                        src="@/assets/Images/AppIcon/icon_list_up.png"
                      />
                    </div>
                  </eagle-col>
                  <eagle-col span="2">
                    <div @click="down(index2)" class="ml-5">
                      <img
                        class="operation-imgs"
                        src="@/assets/Images/AppIcon/icon_list_down.png"
                      />
                    </div>
                  </eagle-col>
                  <eagle-col span="2">
                    <div @click="add(index2, item2.Activity)" class="ml-5">
                      <img
                        class="operation-imgs"
                        src="@/assets/Images/AppIcon/icon_table_add.png"
                      />
                    </div>
                  </eagle-col>
                  <!-- <van-col span="2">
                    <div @click="delItem(index2)" class="ml-5">
                      <img
                        class="operation-imgs"
                        src="@/assets/Images/AppIcon/icon_delete.png"
                      />
                    </div>
                  </van-col> -->
                </eagle-cell>
                <van-divider />
              </eagle-col>
            </div>
          </eagle-row>
        </eagle-row>
      </eagle-collapse-item>
    </eagle-collapse>
    <div class="btn_submit">
      <eagle-button block type="info" @click="submit">
        保存
      </eagle-button>
    </div>
    <!-- 弹出层 -->
    <eagle-dialog
      title="添加"
      v-model="showAdd"
      titlePosition="center"
      @close="cancle"
      @confirm="confirm"
    >
      <eagle-input
        label="操作要点"
        name="name"
        v-model="OperatePoint"
        required
        placeholder="请输入"
        type="textarea"
        isInputText
      ></eagle-input>
      <eagle-input
        label="危险源"
        name="name"
        v-model="DangerousSource"
        placeholder="请输入"
        isInputText
      ></eagle-input>
      <eagle-input
        label="潜在后果"
        name="name"
        v-model="LatentConsequencesName"
        placeholder="请输入"
        isInputText
      ></eagle-input>
      <eagle-input
        label="图示："
        name="uploader"
        v-model="Attachs"
        :key="ImgKey"
        ref="upload"
      >
        <template #input>
          <eagle-image-uploader :images.sync="Attachs"></eagle-image-uploader>
        </template>
      </eagle-input>
    </eagle-dialog>

    <!--个体防护-->
    <risk-mark-dialog
      @callback="_chooseRiskMarkItem"
      :show.sync="showMark"
    ></risk-mark-dialog>
    <!-- <van-popup
      v-model="showMark"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title"></div>
      <div class="popup-content">
        <RiskMarkItem @cb="_chooseRiskMarkItem" />
      </div>
    </van-popup> -->
  </div>
</template>

<script>
import RiskMarkDialog from "@/views/components/risk/riskMarkDialog.vue";
export default {
  components: { RiskMarkDialog },
  data() {
    return {
      id: this.$route.query.id,
      autoSize: true,
      show: false,
      showAdd: false,
      showMark: false,
      isMulti: false,
      showIcon: false,
      data: {},
      dataMark: {},
      form: {},
      activeNames: ["1"],
      ReceiverUserName: "",
      DangerousSource: "",
      LatentConsequencesName: "",
      Activity: "",
      OperatePoint: "",
      Attachs: "",
      ImgKey: "",
      filter: {
        page: 0,
        dataType: "List",
      },
      markFilter: {
        page: 0,
        dataType: "Sys",
        PageType: "OpRegulation",
      },
      markLoading: false,
      markFinished: false,
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    ChangeVal1(val) {
      if (this.form.vScope != val) {
        this.showIcon = true;
      } else {
        this.showIcon = false;
      }
    },
    getDetail() {
      let _this = this;
      let params = { id: _this.id };
      _this.$axios
        .get("/RiskOpRegulation/GetDetail", { params: params })
        .then((res) => {
          var data = res.data;
          data.vScope = "";
          data.Details5 = [];
          data.Details3.forEach((element) => {
            const index1 = data.Details5.findIndex(
              (x) => x.Activity === element.Activity
            );
            if (index1 < 0) {
              data.Details5.push(element);
            }
          });
          data.vScope = data.Scope;
          _this.form = data;
        });
    },
    addMark() {
      this.showMark = true;
    },
    _chooseRiskMarkItem(marklist) {
      if (marklist) {
        let obj = {};
        marklist.forEach((item) => {
          obj = {
            Code: item.code,
            Attachs: item.MarkAttach,
            Name: item.name,
            ID: this.id,
          };
          const index = this.form.Details2.findIndex(
            (x) => x.Code === item.code
          );
          if (index < 0) {
            this.form.Details2.push(obj);
          }
        });
        this.showMark = false;
      }
    },
    //添加
    add(index, value) {
      this.Activity = value;
      this.showAdd = true;
    },
    /* 上移 */
    up(index) {
      if (this.form.Details3.length > 1 && index !== 0) {
        this.form.Details3 = this.swapItems(
          this.form.Details3,
          index,
          index - 1
        );
      }
    },
    // 下移
    down(index) {
      if (
        this.form.Details3.length > 1 &&
        index !== this.form.Details3.length - 1
      ) {
        this.form.Details3 = this.swapItems(
          this.form.Details3,
          index,
          index + 1
        );
      }
    },
    //删除
    // delItem(index) {
    //   const _this = this;
    //   this.$dialog
    //     .confirm({
    //       title: "询问",
    //       message: "确定要删除吗？",
    //     })
    //     .then(() => {
    //       _this.form.Details3.splice(index, 1);
    //     })
    //     .catch(() => {
    // on cancel
    //     });
    // },
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    del(index) {
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要删除标识吗？",
        })
        .then(() => {
          _this.form.Details2.splice(index, 1);
        })
        .catch(() => {
          // on cancel
        });
    },
    confirm() {
      if (!this.OperatePoint) {
        return this.$toast("操作要点不能为空");
      }
      let obj = {
        DangerousSource: this.DangerousSource,
        OperatePoint: this.OperatePoint,
        LatentConsequencesName: this.LatentConsequencesName,
        Activity: this.Activity,
        Attachs: this.Attachs,
      };
      this.form.Details3.push(obj);
      this.showAdd = false;
    },
    cancle() {
      //this.ImgKey = "";
      this.OperatePoint = "";
      this.DangerousSource = "";
      this.LatentConsequencesName = "";
      this.showAdd = false;
    },
    submit() {
      var _this = this;
      try {
        _this.form.Details3.forEach((element) => {
          if (!element.OperatePoint) {
            throw new Error();
          }
        });
      } catch (error) {
        return _this.$toast("操作要点不能为空");
      }

      let params = {
        id: _this.form.ID,
        scope: _this.form.Scope,
        details2: _this.form.Details2,
        details3: _this.form.Details3,
      };
      _this.$axios
        .post("/RiskOpRegulation/EditOpRegulation", params)
        .then((res) => {
          _this.$toast.success("保存成功");
          setTimeout(() => {
            _this.$router.goRefresh();
          }, 500);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  background-color: #e8f1f8;
}
.cellstyle {
  border-bottom: 1px solid;
}
.tit {
  background-color: #fff;
}
.col_text_left {
  text-align: left;
}
.col_text_center {
  text-align: center;
  margin: 15px;
  font-size: 15px;
}
.colstyle {
  margin-bottom: 5px;
}
.spanText {
  margin: 4px;
  margin-left: 6px;
}
.rowBack {
  background-color: #f8f9f9;
  padding: 8px;
}
.risk_item_radio {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #e8f1f8;
}
.spanTitle1 {
  font-size: 0.47rem;
  color: #646566;
  width: 80px;
  line-height: 30px;
  margin-right: 20px;
}
.operation-imgs {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
}
.titleStyle img {
  width: 15px;
  height: 15px;
}
// 弹框
.dialog-content {
  position: relative;
  padding: 40px 0;
  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 14px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-right: 20px;
    }
  }
  .dialog-content-radio {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 15px;
  }
}
</style>
